<template>
  <div>
    <!-- 头部 -->
    <mt-header title="我的"></mt-header>
    <!-- 个人信息内容 -->
    <div class="personInfo">
      <div class="longinReg" @click="goto">
        <div class="left">
          <div class="logo">
            <img src="./images/头像.png" alt="头像">
          </div>
          <div class="content">
            <span>{{userInfo.username || '登录|注册'}}</span>
            <!--  <span v-else>登录|注册</span> -->
            <div class="phone">
              <img src="./images/手机.png" alt>
              <i>暂无绑定手机号</i>
            </div>
          </div>
        </div>
        <div class="right">
          <img src="./images/右 (1).png" alt="右">
        </div>
      </div>
      <div class="coupons">
        <div class="coupons-momeny common">
          <div>
            <span class="coupons1">0.00</span>
            <i>元</i>
          </div>
          <div>我的余额</div>
        </div>
        <div class="coupons-card common">
          <div>
            <span class="coupons2">0</span>
            <i>个</i>
          </div>
          <div>我的优惠</div>
        </div>
        <div class="coupons-points common">
          <div>
            <span class="coupons3">0</span>
            <i>分</i>
          </div>
          <div>我的积分</div>
        </div>
      </div>
      <div class="order common1">
        <img src="./images/订单.png" alt="订单">
        <span>我的订单</span>
      </div>
      <div class="points common1">
        <img src="./images/积分.png" alt="积分商城">
        <span>积分商城</span>
      </div>
      <div class="clubcard common1">
        <img src="./images/会员卡.png" alt="外卖会员卡">
        <span>外卖会员卡</span>
      </div>
      <div class="server common1">
        <img src="./images/服务中心.png" alt="服务中心">
        <span>服务中心</span>
      </div>
      <!-- 推出登录 -->
      <div @click="loginout">
        <mt-button type="danger" size="large" v-if="userInfo.username" style="margin-top:10px">退出登录</mt-button>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
export default {
  methods: {
    /* 跳转路由 */
    goto() {
      if (this.userInfo.username) {
        this.$router.push("/userinfo");
      } else {
        this.$router.push("/login");
      }
    },
    //退出登录---把vuex里的vuex清空
    loginout() {
      this.$messagebox.confirm("退出登录？").then(
        action => {
          this.$store.dispatch("clearUserInfo");
          this.$toast("退出成功");
        },
        action => {
          console.log("2");
        }
      );
      //
    }
  },
  computed: {
    ...mapState(["userInfo"])
  }
};
</script>
<style lang="stylus" scoped>
/* 头部 */
.mint-header {
  background-color: rgb(0, 143, 255);
  font-size: 0.35rem;
}

/* 个人信息内容 */
.personInfo {
  height: 87vh;
  overflow: auto;
  margin-top: 1px;

  .longinReg {
    display: flex;
    justify-content: space-between;
    background-color: rgb(0, 143, 255);
    padding: 10px;

    .left {
      width: 80%;
      display: flex;
      margin-left: 0.3rem;

      .logo {
        width: 25%;
        display: flex;
        justify-content: center;
        align-items: center;

        img {
          display: block;
          width: 180%;
          height: 1.2rem;
        }
      }

      .content {
        display: flex;
        flex-flow: wrap;
        margin-left: 0.19rem;
        margin-top: 0.19rem;

        span {
          font-size: 0.25rem;
          display: block;
          width: 100%;
          color: white;
          margin-left: 0.2rem;
        }

        .phone {
          width: 100%;
          display: flex;
          align-items: center;

          img {
            width: 15%;
            display: block;
            height: 0.6rem;
          }

          i {
            font-size: 0.2rem;
            color: white;
            display: block;
          }
        }
      }
    }

    .right {
      width: 20%;
      display: flex;
      justify-content: center;
      align-items: center;

      img {
        display: block;
        width: 30%;
        height: auto;
      }
    }
  }

  .coupons {
    display: flex;
    marginp: 5px 0;
    border-bottom: 1px rgba(0, 0, 0, 0.1) solid;

    .coupons-card {
      border-left: 1px rgba(0, 0, 0, 0.1) solid;
      border-right: 1px rgba(0, 0, 0, 0.1) solid;
    }

    .coupons1 {
      font-size: 0.45rem;
      color: rgb(255, 143, 0);
    }

    .coupons2 {
      font-size: 0.45rem;
      color: rgb(250, 119, 79);
    }

    .coupons3 {
      font-size: 0.45rem;
      color: rgb(108, 119, 21);
    }
  }

  .order {
  }

  .points {
  }

  .clubcard {
  }

  .server {
  }
}

/* 公共样式表 */
.common {
  width: 33%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-flow: wrap;
  padding: 20px 0;

  div {
    width: 100%;
    font-size: 0.2rem;
    text-align: center;
    color: gray;
    margin-bottom: 10px;
  }
}

.common1 {
  display: flex;
  align-items: center;
  margin-left: 0.15rem;
  border-bottom: 0.5px rgba(0, 0, 0, 0.09) solid;
  padding: 0.2rem 0;

  img {
    width: 6%;
    height: 6%;
  }

  span {
    font-size: 0.25rem;
    margin-left: 0.1rem;
    color: rgb(86, 85, 87);
  }
}
</style>
